<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="common/common :: common_head('权限撤销')"></head>
<head>
    <link rel="stylesheet" th:href="@{/css/back/back-see-all-question.css}">
</head>
<body>
<!-- 引入公共的导航部分 -->
<header th:include="~{/common/common :: common_header_back('','权限撤销')}"></header>

<article>
    <!-- 侧边栏部分 -->
    <nav th:include="~{/common/common :: common_left_nav('','')}"></nav>
    <!-- 显示内容的部分 -->
    <div class="context-wrap">
        <!-- 按照指定的内容搜索 -->
        <div class="demoTable">
            请输入用户名：
            <div class="layui-inline">
                <input class="layui-input" id="search" autocomplete="off">
            </div>
            <button class="layui-btn" id="search-button" data-type="reload">搜索</button>
        </div>
        <!-- 数据表格 -->
        <table class="layui-hide" id="user-table" lay-filter="user-table"></table>

        <!-- 操作按钮 -->
        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="cancel">撤销权限</a>
        </script>

    </div>
</article>

</body>
</html>
<script>
    layui.use(['element', 'table'], function () {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.$;
        let layer = layui.layer;
        table.render({
            elem: '#user-table'
            , url: '/user/getCancelApprove'
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar: ['filter', 'exports', 'print']
            , title: '用户数据表'
            , cols: [
                [
                    {title: '序号', type: "numbers", unresize: false, width: 80}
                    , {field: 'userAccount', title: '账号', width: 135}
                    , {field: 'userName', title: '用户名', width: 135}
                    , {field: 'userPhone', title: '电话号', width: 135}
                    , {field: 'userNumber', title: '身份证号', width: 280}
                    , {field: 'userEmail', title: '邮箱', width: 280}
                    , {fixed: 'right', title: '操作', toolbar: '#barDemo'}
                ]
            ]
            , id: 'userTable'
            , limits: [2, 4, 6, 8, 10]
            , page: true
        });

        //数据表格头部的按钮事件
        table.on('toolbar(user-table)', function (obj) {
            switch (obj.event) {

                case 'delete-question':
                    layer.alert('撤销管理员');
                    break;

            }
            ;
        });


        //搜索之后数据表格重载
        $("#search-button").on("click", function () {
            //执行重载
            table.reload('userTable', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                , where: {
                    search: $("#search").val(),
                }
            });
            user - table
        });


        //监听行工具事件
        table.on('tool(user-table)', function (obj) {
            let data = obj.data;

            //删除指定行数据
            if (obj.event == 'cancel') {
                $.ajax({
                    url: '/user/setCancelUser',
                    data: {
                        userId: data.userId,
                    },
                    dataType: 'JSON',
                    success: function (res) {
                        if (res == 1) {
                            layer.msg("权限已移除");
                        }
                        if (res == 2) {
                            layer.msg("无法移除此用户权限");
                        }
                        //执行重载
                        table.reload('userTable', {
                            page: {
                                curr: $(".layui-laypage-skip .layui-input").val() //重新当前页重载;
                            }
                        });
                    }
                }, JSON)
            }

        });
    });

</script>